<template>
  <div>
    <el-button type="primary" @click="openDialog">派单</el-button>

    <el-dialog :visible.sync="dialogVisible" title="派单">
      <el-table :data="unassignedWorkOrders" @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="personnel_name" label="客户名称"></el-table-column>
        <el-table-column prop="business_name" label="业务名称"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>

      <div v-if="selectedWorkOrder">
        <el-form :model="selectedWorkOrder">
          
          <el-form-item label="选择接收工单人员">
            <el-select v-model="selectedPersonnel" placeholder="请选择人员">
              <el-option v-for="person in personnelList" :key="person.id" :label="person.name"
                :value="person.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="fetchPersonnelSchedule">确定</el-button>
        <!-- <el-table :data="personnelSchedule">
          <el-table-column prop="customer_name" label="客户名称"></el-table-column>
          <el-table-column prop="work_order_name" label="业务名称"></el-table-column>
          <el-table-column prop="appointment_date" label="预约安装时间"></el-table-column>
        </el-table>
        <el-form-item label="预约安装时间">
          <el-date-picker v-model="appointmentDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item> -->
      </div>

      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAssign">确定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  data() {
    return {
      dialogVisible: false,
      unassignedWorkOrders: [],
      unassignedRes:[],
      selectedWorkOrder: null,
      selectedPersonnel: null,
      personnelList: [],
      personnelSchedule: [],
      appointmentDate: null,
      loading: false,
      ids:{
        personnel_id: null,
        business_id:null
      }
    };
  },
  methods: {
    fetchUnassignedWorkOrders() {
      return axios.post('/api/order/unassigned');
    },
    fetchPersonnel() {
      return axios.post('/api/order/perlist');
    },
    
    assignWorkOrder(workOrderId, personnelId, appointmentDate) {
      return axios.post('/api/work-orders/assign', { workOrderId, personnelId, appointmentDate });
    },
    async openDialog() {
      this.dialogVisible = true;
      this.loading = true;
      try {
        const res = (await this.fetchUnassignedWorkOrders());
        const res1 = (await this.fetchPersonnel());
        this.unassignedRes = res.data;
        this.unassignedWorkOrders = this.unassignedRes;
        this.personnelList = res1.data;
        
      } catch (error) {
        console.log(error)
        this.$message.error('获取数据失败');
      } finally {
        this.loading = false;
      }
    },
    handleSelectionChange(val) {
      this.selectedWorkOrder = val[0];
    },
    async fetchPersonnelSchedule() {
      if (!this.selectedPersonnel) {
        this.$message.warning('请选择人员');
        return;
      }
      try {
        this.ids.business_id = this.selectedWorkOrder.id;
        this.ids.personnel_id = this.selectedPersonnel;
        console.log(this.ids)
        const response = await axios.post('/api/order/paidan',this.ids);
        this.dialogVisible = false;
        this.$message.success('派单成功');
      } catch (error) {
        this.$message.error('获取人员时间安排失败');
      }
    },
    async handleAssign() {
      if (!this.selectedWorkOrder || !this.selectedPersonnel ) {
        this.$message.warning('请填写完整信息');
        return;
      }
      try {
        await assignWorkOrder(
          this.selectedWorkOrder.id,
          this.selectedPersonnel,
          this.appointmentDate
        );
        this.$message.success('派单成功');
        this.dialogVisible = false;
      } catch (error) {
        this.$message.error('派单失败');
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
